<template>
	<div class="view_page personalCenter">
		<el-card class="box-card">
			<!--卡片头部-->
			<div slot="header" class="clearfix">
				<div class="left">


					<div class="back-page">
						<div class="add-back" @click="back">
							<i class="fa fa-arrow-left" aria-hidden="true"></i>
							<!-- <span>新增工程</span> -->
							<span>修改用户手机号</span>

						</div>
					</div>
					
				</div>
				<div class="right">
					<el-button type="primary" size="small" @click="user_update_account()">
						保存
					</el-button>
				
				
				
				</div>


			</div>
			<!--卡片内容-->
			<div class="personal-content tt">

				<!--老师-->
				<el-form ref="passwordForm" :model="passwordForm" label-width="90px" style="padding: 0px 20px;">

					<el-form-item label="原手机号码">
						<el-input type="number" readonly onfocus="this.removeAttribute('readonly');"
							v-model="passwordForm.old_phone" placeholder="请输入原手机号码"></el-input>
					</el-form-item>
					<el-form-item label="新手机号码">
						<el-input v-model="passwordForm.phone" placeholder="请输入新手机号码" style="width: calc(100% - 120px);"
							type="number" readonly onfocus="this.removeAttribute('readonly');">

						</el-input>
						<el-button :type="vcodeText=='获取验证码'?'primary':'info'" @click="authentication_code"
							style="width: 110px; float: right; margin-right: 0;" :disabled="vcodeText!='获取验证码'">
							{{ vcodeText }}
						</el-button>

					</el-form-item>
					<el-form-item label="验证码">
						<el-input v-model="passwordForm.Code" placeholder="请输入验证码" type="number" readonly
							onfocus="this.removeAttribute('readonly');">

						</el-input>


					</el-form-item>
					<!-- <el-form-item label=""> -->
					<!-- <el-button :type="vcodeText=='获取新手机号码验证码'?'primary':'info'" @click="authentication_code"
							style="width: 110px;" :disabled="vcodeText!='获取验证码'">{{ vcodeText }}
						</el-button> -->
					<!-- </el-form-item> -->
				</el-form>
			</div>
		</el-card>
	</div>
</template>

<script>
	import {
		Message
	} from 'element-ui'

	export default {
		data() {
			return {

				passwordForm: {
					
					phone: '',
					old_phone:''
					
				},
				pdphone:'',
				vcodeText: '获取验证码',

				userInfo: JSON.parse(localStorage.getItem(this.$apis.getLocalKey().loginPersonnelInformation)).data,
			}
		},
		mounted() {
			// console.log("userInfo",this.userInfo);


		},
		created() {
			this.getUserInfo()
		},
		methods: {
			//获取验证码
			authentication_code() {
				var _this = this
				if (!(/^1[0-9]{10}$/.test(_this.loginForm.phone))) {
					Message.error('手机号格式不正确', )
					return
				}
				var datas = {
					phone: _this.loginForm.phone
				}
				if (_this.vcodeText == '获取验证码') {
					_this.$apis.authentication_code(datas)
						.then((res) => {
							// console.log(res)
							if (res.result == 0) {
								//倒计时60秒
								var timer_num = 60
								var timeClock = setInterval(function() {
									timer_num--
									_this.vcodeText = timer_num
									if (timer_num == 0) {
										clearInterval(timeClock)
										_this.vcodeText = '获取验证码'
									}
								}, 1000)
								_this.formData.vcode = res.vcode

							} else {
								Message.error('查询失败')
							}
						})
						.catch(err => {
							console.log(err, 11)
						})
				}

			},
			// 修改登录信息
			user_update_account() {
				var _this = this
				var datas = _this.passwordForm
				// console.log(datas)
				datas.id = _this.userInfo.id
				if(datas.old_phone == null || datas.old_phone == ''){
					Message.warning("请输入原手机号码");
					return
				}
				if(datas.old_phone != _this.pdphone){
					Message.warning("原手机号码错误");
					return
				}
				//判断电话
				if (datas.phone == null || datas.phone == '') {
					Message.warning("请输入新手机号码");
					return
				}
				if (datas.phone != null || datas.phone != '') {
					var phoneReg = /(\d{2,5}-\d{7,8}(-\d{1,})?)|(1[3|5|7|8]\d{9})|(159\d{8})/;
					if (!phoneReg.test(datas.phone)) {
						Message.warning("新手机号码格式不正确");
						return
					}
					// Message.warning("请输入有效的联系电话");
					// return
				}
				
				_this.$apis.user_update_account(datas).then(res => {
					if (res.result == 0) {
						Message.success('修改成功')
						_this.$router.back()
					}
				})

			},








			//当前登录者信息
			getUserInfo() {
				var _this = this
				var datas = {
					id: _this.userInfo.id
				}
				_this.$apis.user_query(datas).then(res => {
					if (res.result == 0) {
                        _this.pdphone =res.data.phone
					}
				})
			},
			//当前登录者信息
			getUserInfo2() {
				var datas = {
					uid: this.userInfo.id
				};
				this.$apis.getUserInfo(datas).then((res) => {
					if (res.code == 1) {
						this.userDetail = res.data;
						localStorage.setItem(this.$apis.getLocalKey().loginPersonnelInformation, JSON.stringify(res
							.data));
						this.$router.go(0);
					}
				});
			},
			//修改(除手机号邮箱之外的信息修改)
			update() {
				if (this.userDetail.type == 2) {
					//学校修改
					if (this.userDetail.school_name == "") {
						Message.warning("请填写学校名称");
						return;
					}
					//判断电话
					if (this.userDetail.school_tel != null && this.userDetail.school_tel != '') {
						var phoneReg = /(\d{2,5}-\d{7,8}(-\d{1,})?)|(1[3|5|7|8]\d{9})|(159\d{8})/;
						if (!phoneReg.test(this.userDetail.school_tel)) {
							Message.warning("请输入有效的联系电话");
							return
						}
					}

					var datas = {
						id: this.userDetail.school_id,
						name: this.userDetail.school_name,
						tel: this.userDetail.school_tel,
						address: this.userDetail.school_addr,
						bz: this.userDetail.school_bz
					};
					this.$apis.setSchoolInfo(datas).then((res) => {
						if (res.code == 1) {
							Message.success(res.msg);
						} else {
							Message.error(res.msg);
						}
						this.getUserInfo2();
					});
				} else {
					/*          if (this.userDetail.phone != "") {
					            //判断电话
					            var phoneReg = /^1[3|5|7|8]\d{9}$/;
					            if (!phoneReg.test(this.userDetail.phone)) {
					              Message.warning("请输入有效的手机号");
					              return
					            }
					          }*/
					if (this.userDetail.name == '') {
						Message.warning("请输入姓名");
						return;
					}
					var datas = {
						uid: this.userDetail.id,
						name: this.userDetail.name,
						//            phone:this.userDetail.phone,
						major: this.userDetail.major,
						grade: this.userDetail.grade,
						xuehao: this.userDetail.xuehao
					};
					this.$apis.setUserInfo(datas).then((res) => {
						if (res.code == 1) {
							Message.success(res.msg);
						} else {
							Message.error(res.msg);
						}
						this.getUserInfo2();
					});
				}
			},
			//点击修改密码
			toUpdatePwd() {
				this.dialogVisible = true;
				this.passwordForm.oldPassword = '';
				this.passwordForm.newPassword = '';
				this.passwordForm.checkPassword = '';
			},
			//密码确定
			passQd() {
				if (this.passwordForm.oldPassword == "") {
					Message.warning("请输入旧密码");
					return
				}
				if (this.passwordForm.newPassword == "") {
					Message.warning("请输入新密码");
					return
				}
				if (this.passwordForm.checkPassword == "") {
					Message.warning("请输入确认密码");
					return
				}
				if (this.passwordForm.newPassword != this.passwordForm.checkPassword) {
					Message.warning("新密码与确认密码不一致");
					return
				}
				//调接口
				var datas = {
					uid: this.userDetail.id,
					oldpassword: this.passwordForm.oldPassword,
					password: this.passwordForm.newPassword
				};
				this.$apis.setPassword(datas).then((res) => {
					if (res.code == 1) {
						this.dialogVisible = false;
						Message.success(res.msg);
						this.$router.push({
							path: '/login'
						});

					} else {
						Message.error(res.msg);
					}
				});
			},
			back() {
				this.$router.back()
			},

		},
	}
</script>

<style>
	.personal-form {
		padding: 20px 150px 20px 20px;
	}

	.personal-form .el-input,
	.personal-form .el-textarea {
		width: 50%;
	}

	.personal-form .el-form-item__label {
		color: #808080
	}

	.personal-form a {
		color: #38f !important;
		margin-left: 10px;
	}

	.tishi {
		position: absolute;
		font-size: 12px;
		color: #f12828;
		line-height: 22px;
		padding-left: 5px;
	}
	.tt .el-button {
	    margin-left: 0px !important;
	    margin-right: 0px !important;
	    margin-bottom: 0px !important;
	}
</style>
